<template>
	<view class="vip_box" v-if="info">
		<back title="会员中心"></back>
		<view class="vip_card1">
			<view class="vip_card_left">
				<image style="width: 41rpx; height: 41rpx;" src="../../static/vip/icon_41.png" mode=""></image>
				<span class="vip_car_title">{{user_info.user_grade.name}}</span>
				<view class="vip_bar">
					总积分:{{user_info.points}}
				</view>
			</view>
			<view class="vip_card2">
				每天凌晨00:00更新会员等级
			</view>
			<view class="">
				<view class="vip_card3">
					拥有积分{{user_info.points}}，再获得{{next_point}}可升至{{next_level.name?next_level.name:''}}
				</view>
				<view class="tiao">
					<view class="tiao_nei" :style="{'width': width}"></view>
				</view>
			</view>
			<image src="../../static/vip/icon_44.png" style="width: 316rpx; height: 316rpx; position: absolute; right: 0; top: 75rpx;" mode=""></image>
		</view>
		<view class="" class="vip_icon_list">
			<view class="list_item_top">
				<image style="width: 36rpx; height: 36rpx;" src="../../static/vip/icon_42.png" mode=""></image>
				<span class="list_title">等级规则</span>
			</view>
			<view class="vip_list_box">
				<view class="vip_list_box_top">
					<view class="title_top_bar">等级名称</view>
					<view class="title_top_bar">折扣</view>
					<view class="title_top_bar">升级门槛</view>
				</view>
				<view v-for="(item,index) in list" :key="index" class="vip_list_box2">
					<view class="title_top_bar1">
						<image class="item_icon" :src="item.pic" mode=""></image>
						<span>{{item.name}}</span>
					</view>
					<view class="title_top_bar1">
						{{item.discount}}折扣
					</view>
					<view class="title_top_bar1">
						{{item.points}}积分
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import back from '@/componts/back.vue';
	import config from "@/config/index.js";
	const {baseUrl , imgUrl} = config;
	export default {
		components:{
			back
		},
		data() {
			return {
				width:'0%',
				next_point:0,
				navPadding:'',
				info:{},
				user_info:{},
				next_level:{},
				list:[]
			}
		},
		onLoad() {
			const res = uni.getSystemInfoSync()
			
			this.navPadding = res.statusBarHeight+6+'px'
			var height = res.statusBarHeight
		},
		onShow() {
			this.getUser_info()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			getUser_info(){
				var data = {}
				this.$wqzApi.user_index(data).then(res=>{
					this.user_info = res.data
					this.getinfo()
				})
			},
			getinfo(){
				var data = {}
				this.$wqzApi.User_user_grade(data).then(res=>{
					this.info = res.data.user_grade
					this.list = res.data.grade
					
					this.list.forEach((item,index)=>{
						if(item.name == this.info.name){
							
							if(index>0){
								this.next_level = this.list[index-1] 
								this.width = this.user_info.history_points/this.next_level.points
								this.width = Number(this.width) * 100
								this.width = `${this.width}%`
								this.next_point = this.next_level.points - this.user_info.history_points
							}else{
								this.width = '100%'
							}
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("vip.scss");
</style>